<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .control{position: relative;}
        .control .dialog{width:200px;font-size:12px;line-height:16px;background:#efefef;position: absolute;display: none;}
    </style>
</head>
<body>

    <div class="control">
        <input type="text" id="txt1">
        <input type="text" id="txt2">
        <input type="text" id="txt3">
        <input type="button" id="btn" value="append">
        <div class="dialog">
            点击后会将输入框内容添加到下方表格中
        </div>
    </div>
    

    <table border="1" width="400" align="center">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    
</body>
<script>

    var oBtn = document.getElementById("btn")
    var oTxt1 = document.getElementById("txt1")
    var oTxt2 = document.getElementById("txt2")
    var oTxt3 = document.getElementById("txt3")
    var oTbody = document.querySelector("tbody")

    oBtn.onclick = function(){
        // 创建元素
        var td1 = document.createElement("td")
        var td2 = document.createElement("td")
        var td3 = document.createElement("td")
        var td4 = document.createElement("td")
        var tr = document.createElement("tr")

        // 设置内容
        td1.innerText = oTxt1.value
        td2.innerText = oTxt2.value
        td3.innerText = oTxt3.value
        td4.innerText = "删除"
        
        // 插入容器
        tr.appendChild(td1)
        tr.appendChild(td2)
        tr.appendChild(td3)
        tr.appendChild(td4)
        oTbody.appendChild(tr)

        // 绑定删除按钮的事件，删除当前tr
        td4.onclick = function(){
            tr.remove();
        }
    }
    
    var oDialog = document.querySelector(".control .dialog")
    // 鼠标进入，显示
    oBtn.onmouseover = function(){
        oDialog.style.display = "block";
    }
    // 鼠标离开，隐藏
    oBtn.onmouseout = function(){
        oDialog.style.display = "none";
    }

    
</script>
</html>